{template '../header'}

<script type="text/javascript" src="/plugins/webuploader/webuploader.html5only.min.js"></script>

<div class="form-group">
    <label>
        子单元人员名单
    </label>
    <div class="form-control form-control-sm" id="file"></div>
    <small id="result"></small>
</div>
<style type="text/css">
    #file input {
        display: none;
    }
</style>
<script type="text/javascript">
    $(function () {

        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            // 文件接收服务端。
            server: '/admin/upload/chunk',
            // 选择文件的按钮。可选。
            pick: {
                id: '#file',
                multiple: false,
                innerHTML: '请选择图片 ...',
            },
            accept: {
                title: '图片',
                extensions: 'jpg,png,gif',
                mimeTypes: ['image/jpeg', 'image/png', 'image/gif'],
            },
            formData: {
                // 附加表单数据
            },
            compress: {
                // 图片质量，只有type为`image/jpeg`的时候才有效。
                quality: 90,
                // 单位字节，如果图片大小小于此值，不会采用压缩。
                compressSize: 1024 * 1024,
            },
            fileVal: 'file',
            fileSizeLimit: 5 * 1024 * 1024,
            fileSingleSizeLimit: 5 * 1024 * 1024,
            chunked: true, //开启分片上传
            chunkSize: 0.1 * 1024 * 1024,
            method: 'POST',
            duplicate: false,
            sendAsBinary: false,
        });

        // 进度实时显示
        uploader.on('beforeFileQueued', function (file) {
            console.log(file);
        });

        // 进度实时显示
        uploader.on('uploadProgress', function (file, percentage) {
            $('.webuploader-pick').text('上传：' + xround(percentage, 2) + '%');
        });

        // 文件上传成功
        uploader.on('uploadSuccess', function (file, ret) {
            console.log(file);
            if (ret.path) {
                $('.webuploader-pick').text('上传完成，请点击导入，或重新上传');
                $("#result").html('<a target="_blank" href="/uploads/' + ret.path + '">' + ret.name + '</a>');
                $("#result").attr('file', ret.path);
                $("#import").prop('disabled', false);
            }
        });

        uploader.on('uploadError', function (file, reason) {
            $('.webuploader-pick').text('上传出错：' + reason);
        });

        uploader.on('startUpload', function () {
            $("#import").prop('disabled', true);
        });

        uploader.on('uploadFinished', function () {
            $("#import").prop('disabled', false);
        });

        uploader.on('error', function (error) {
            $('.webuploader-pick').text('上传出错：' + error);
            $("#import").prop('disabled', false);
        });
    });
</script>

{template '../footer'}